<template>
  <div class="div-body fixed-layout" :class='container_class+theme_skin'>
    <!--<nprogress-container></nprogress-container>-->
    <div class="nprogress-container"></div>
    <template v-if="configSuccess">
      <router-view></router-view>
    </template>
    <template v-else>
      <div class="preloader">
        <div class="loader">
          <div class="loader__figure"></div>
          <p class="loader__label">软环境 Loading...</p>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
  import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
  import { mapGetters, mapActions } from 'vuex'
  import serAccess from 'serves/api-access'
  import {SET_FAR_STATUS} from 'serves/data-status'
  export default{
    data(){
      return {
        configSuccess:false
      }
    },
    components: {
      //NprogressContainer
    },
    async mounted(){
      /*SET_CITY();*/
      let res =await serAccess.isToken();
      if(res.code==1){
        this.setUser(res.data);
        this.$set(this,'configSuccess',true);
        // this.$router.push({ name:'Login'});
          /*
          * 获取远端配置项
        //   * */
        // SET_FAR_STATUS().then((res)=>{
        //   this.$set(this,'configSuccess',true);
        // },()=>{
        //   this.$set(this,'configSuccess',true);
        //   this.$router.push({ name:'Login'});
        // });
      }else {
        this.$set(this,'configSuccess',true);
        this.$router.push({ name:'Login'});
      }
    },
    beforeMount () {
      const set =  ()=> {
        var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width;
        var topOffset = 55;
        if (width < 1170) {
          this.toggleDevice({
            isMenuMini:true
          });
        }
        else {
          this.toggleDevice({
            isMenuMini:false
          });
        }
        /*TODO body为滚动视图 给容器设置最小高度*/
        var height = ((window.innerHeight > 0) ? window.innerHeight : this.screen.height) - 1;
        height = height - topOffset;
        if (height < 1) height = 1;
        if (height > topOffset) {
          this.toggleDevice({
            minHeight:height
          });
        }
      };
      $(window).ready(set);
      $(window).on("resize", set);
    },
    computed:{
      ...mapGetters({
        device: 'device' ,
      }),
      theme_skin(){
           return this.device.themeSkin+' '
      },
      container_class(){
           return this.device.isMenuMini?this.device.isMenuShow?'show-sidebar mini-sidebar ':'mini-sidebar ':''
      }
    },
    methods: mapActions([
      'toggleDevice',
      'setUser',
    ])
  }
</script>
<style lang="less">
  @import '~nprogress/nprogress.css';
  html {
    background-color: whitesmoke;
  }

  .animated {
    animation-duration: .377s;
  }

  .nprogress-container {
    position: fixed !important;
    width: 100%;
    height: 100px;
    z-index: 1026;
    pointer-events: none;

    #nprogress {
      @color: #48e79a;

      .bar {
        background: @color;
      }
      .peg {
        box-shadow: 0 0 10px @color, 0 0 5px @color;
      }

      .spinner-icon {
        border-top-color: @color;
        border-left-color: @color;
        width: 60px;
        height: 60px;
        transform: translate(-50%,-50%);
        border-width :6px;
      }
    }
  }
</style>
